<!doctype html5>

<html>
  <head>
    <!-- <script src="alpine.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>
    <script>
         window.Alpine.start();
    </script>
  </head>
  <body>
    <div x-data="{isOpen: false}">
        <button @click="isOpen=!isOpen"><span x-show="isOpen">隐藏</span><span x-show="!isOpen">显示</span></button>
        <button @click="isOpen=!isOpen" x-text="isOpen?'隐藏':'显示'"></button>
        <h1 x-show="isOpen">我在这里</h1>
    </div>
    <div x-data="{ field: '初始值' }">
        <button x-on:click="field = '新的值'">点击按钮</button>
        <p x-text="`字段值：${ field }`"></p>
    </div>
  </body>

</html>
